<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时搜索</title>
    <script src="../js/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <h1>实时搜索功能</h1>
        <input type="text" v-model="searchKeyword" placeholder="请输入搜索内容">
        <ul>
            <li v-for="(item, index) in filteredResults" :key="item.id">
                {{item.name}}
                (ID: {{index}}
                {{item.id}})                
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                searchKeyword: '',
                items: [
                    { id: 202319180501, name: '陈家乐' },
                    { id: 202319180502, name: '陈丽莹' },
                    { id: 202319180503, name: '陈平' },
                    { id: 202319180504, name: '邓惠圆' },
                    { id: 202319180505, name: '扶云风' },
                    { id: 202319180506, name: '付琨怡' },
                    { id: 202319180507, name: '何成日' },
                    { id: 202319180508, name: '何梓彤' },
                    { id: 202319180509, name: '黄寒燕' },
                    { id: 202319180510, name: '黄河' },
                    { id: 202319180511, name: '黄霞萍' },
                    { id: 202319180512, name: '李南凤' },
                    { id: 202319180513, name: '李亚辉' },
                    { id: 202319180514, name: '刘应昊' },
                    { id: 202319180515, name: '龙鑫' },
                    { id: 202319180516, name: '马赞崴' },
                    { id: 202319180517, name: '宁扬' },
                    { id: 202319180518, name: '欧小乐' },
                    { id: 202319180519, name: '皮瑶' },
                    { id: 202319180520, name: '瞿霆雨' },
                    { id: 202319180521, name: '全叔文' },
                    { id: 202319180522, name: '任颖佳' },
                    { id: 202319180523, name: '王硕' },
                    { id: 202319180524, name: '王宇昊' },
                    { id: 202319180525, name: '王梓名' },
                    { id: 202319180526, name: '吴彦毅' },
                    { id: 202319180527, name: '吴耀华' },
                    { id: 202319180528, name: '伍丹' },
                    { id: 202319180529, name: '伍梅' },
                    { id: 202319180530, name: '向嘉豪' },
                    { id: 202319180531, name: '谢畅' },
                    { id: 202319180533, name: '阳惠芝' },
                    { id: 202319180534, name: '杨涵' },
                    { id: 202319180535, name: '易紫俊' },
                    { id: 202319180536, name: '余泽水' },
                    { id: 202319180537, name: '张冰慧' },
                    { id: 202319180538, name: '张丽萍' },
                    { id: 202319180539, name: '张榕辉' },
                    { id: 202319180540, name: '张智炫' },
                    { id: 202319180541, name: '钟杰' },
                    { id: 202324010428, name: '吴玉蓉' }
                ],
                filteredResults: [] // 过滤后的结果
            },
            methods: {
                // 过滤函数
                filterItems(keyword) {
                    if (!keyword) {
                        this.filteredResults = this.items;
                        return;
                    }
                    this.filteredResults = this.items.filter(item => item.name.includes(keyword));
                }
            },
            watch: {
                // 监听搜索框内容变化
                searchKeyword: function (newVal) {
                    this.filterItems(newVal);
                }
            },
            mounted() {
                // 初始过滤所有结果
                this.filteredResults = this.items;
            }
        });
    </script>
</body>

</html>